<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template xmlns="http://www.w3.org/1999/html">
  <div class="recommendSongs">
    <vue-particles
      class="login-bg"
      color="#0f1c70"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="2"
      linesColor="#ffffff"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="topBanner">
      <!-- 头部导航栏   -->
      <van-nav-bar style="background-color: #67c6da;position: absolute">
        <template #left>
          <van-icon name="zuojiantou" class-prefix="iconfont" size="26px" @click="$router.back()"></van-icon>
        </template>
        <template #right>
          <!--          <p style="font-size: 14px" @click="selectAll">{{ selectAllText }}</p>-->
        </template>
      </van-nav-bar>
      <div style="padding: 90px 0 0  20px;margin-bottom: 20px">
        <span style="font-size: 26px">{{ dateTime | month }}</span>
        <span style="font-size: 13px">/{{ dateTime | day }}</span>
        <div>定制你今日的专属好音乐~</div>
      </div>
    </div>
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <van-icon class-prefix="iconfont" name="gf-playCircle" color="#e53537" size="22px"></van-icon>
        <span>播放全部</span>
      </template>
      <template #right-icon>
        <van-icon class-prefix="iconfont" name="menu" color="#000000" size="18px"></van-icon>
      </template>
    </van-cell>
    <div>
      <van-row @click="gotoMusicPlayBack(item.id)" v-for="(item,index) in dailySongs" :key="index"
               style="margin-bottom: 10px" align="center" type="flex"
               justify="space-around">
        <van-col span="4" @click="changePlayMusics(item)">
          <img :src="item.al.picUrl" style="width: 60px;height: 60px">
        </van-col>
        <van-col span="14" style="padding-left: 3px;line-height: 30px" @click="changePlayMusics(item)">
          <div style="font-size: 16px">{{ item.name }}</div>
          <div
            style="font-size: 10px;width: 200px;word-break: break-all;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden">
            <span style="color: #e53537;background-color: #faeded;padding: 2px">{{ item.reason }}</span>
            <span>{{ item.ar[0].name }}</span>
            <span>-{{ item.al.name }}</span>
          </div>
        </van-col>
        <van-col span="2" style="line-height: 60px">
          <van-icon name="bofangshipin" class-prefix="iconfont" size="24px"></van-icon>
        </van-col>
        <van-col span="2" style="line-height: 60px">
          <van-icon name="gengduo-shuxiang" class-prefix="iconfont" size="24px"></van-icon>
        </van-col>
      </van-row>
    </div>
    <playMusics style="width: 100%;height: 55px;background-color: white;position: fixed;bottom: 0px"></playMusics>
  </div>
</template>

<script>
import {getRecommendSongs} from "../../api/recommend";
import playMusics from '../../components/PlayMusic.vue'
import {getSongUrl} from "../../api/song";

export default {
  name: "recommendSongs",
  data() {
    return {
      dailySongs: {},
      dateTime: new Date()
    }
  },
  components: {
    playMusics
  },
  filters: {
    month(val) {
      let date = new Date(val)
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      return `${month}`
    },
    day(val) {
      let date = new Date(val)
      let day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      return `${day}`
    }

  },
  created() {
    this.getRecommendSongs()
    this.getDays()
  },
  methods: {
    // 获取每日推荐歌曲
    getRecommendSongs() {
      getRecommendSongs().then(res => {
        this.dailySongs = res.data.data.dailySongs
      })
    },
    //初始化页面数据
    getDays() {
      let date = new Date()
    },
    //播放列表传递数据
    changePlayMusics(item) {
      let data = {
        images: item.al.picUrl,
        author: item.ar[0].name,
        title: item.name,
        id: item.id,
        state: "false"
      }
      this.$store.dispatch("changePlayMusics", data)
      getSongUrl(item.id).then(res => {
        this.$store.dispatch("changeAudio", res.data.data[0].url)
        this.$store.state.musicAudio.music.play()
        this.$store.dispatch("changeMusicState", "true")
      })
    },
    // 跳转到歌曲详情
    gotoMusicPlayBack(item) {
      console.log(item)
      this.$router.push({name: 'musicPlayBack', query: {id: item}})
    }
  }
}
</script>

<style scoped lang="scss">
.recommendSongs {
  width: 100%;
  height: 100%;

  .login-bg {
    position: absolute;
    width: 100%;
    height: 180px;
    background-color: #67c6da;
  }

  .topBanner {
    position: relative;
    color: #ffffff;
  }
}
</style>
